<script setup lang="ts">
import { toRaw } from 'vue';
import xtPagination from '../pagination/XtPagination.vue';

interface TopBtn {
  disabled?: boolean;
  label: string;
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
  icon?: string;
  [key: string]: any; // 允许其他自定义属性
}

interface Column {
  label: string;
  prop: string;
  width?: number | string;
  minWidth?: number | string;
  align?: 'left' | 'center' | 'right';
  type?:
    | 'index'
    | 'switch'
    | 'operate'
    | 'select'
    | 'tag'
    | 'slot'
    | 'custom'
    | 'icon'
    | 'startStopType';
  fixed?: boolean | 'left' | 'right';
  showOverflowTooltip?: boolean;
  headerAlign?: 'left' | 'center' | 'right';
  slotName?: string; // 更明确的插槽名称
  formatter?: (row: any, column: Column, cellValue: any, index: number) => any;
  [key: string]: any; // 允许其他自定义属性
}

export interface Props {
  topBtn?: TopBtn[];
  divider?: boolean;
  columns: Column[];
  selection?: boolean;
  total?: number;
  pagination?: boolean;
  layout?: string[];
  headerRowStyle?: Object;
}

const props = withDefaults(defineProps<Props>(), {
  topBtn: () => [],
  divider: false,
  columns: () => [],
  selection: false,
  total: 0,
  pagination: false,
  layout: () => ['total', 'sizes', 'prev', 'pager', 'next', 'jumper'],
});

const emit = defineEmits<{
  (e: 'btnClick', btn: TopBtn): void;
  (e: 'selection-change', selection: any[]): void;
  (e: 'row-click', row: any, column: any, event: Event): void;
  (
    e: 'pagination-change',
    page: {
      currentPage: number;
      pageSize: number;
    }
  ): void;
}>();

/** 表格上部按钮点击事件 */
const buttonClick = (btn: TopBtn) => {
  emit('btnClick', toRaw(btn));
};

/** 处理选择变化 */
const handleSelectionChange = (selection: any[]) => {
  emit('selection-change', selection);
};

const paginationChange = (page: any) => {
  emit('pagination-change', page);
};

const tableHeaderStyle = ({ row, column, rowIndex, columnIndex }) => {
  return { background: 'orange' };
  // if (rowIndex === 0 && columnIndex === 0) {
  //   return 'background-color: #afccfd; color:#000000;'; //蓝色
  // } else if (rowIndex === 0 && columnIndex === 1) {
  //   return 'background-color: #c0e33c; color:#000000;'; //绿色
  // } else if (rowIndex === 0 && columnIndex === 2) {
  //   return 'background-color: #fbc57b; color:#000000;'; //橙色
  // } else {
  //   return 'color:#000000; background: #ffffff;';
  // }
};
</script>

<template>
  <div class="xt-table">
    <!-- 顶部按钮区域 -->
    <div v-if="props.topBtn?.length" class="xt-table-button">
      <el-button
        v-for="(btn, index) in props.topBtn"
        :link="btn.type === 'text'"
        :key="index"
        :icon="btn.icon"
        :type="btn.type !== 'text' ? btn.type : undefined"
        :disabled="btn.disabled"
        @click="buttonClick(btn)">
        {{ btn.label }}
      </el-button>
    </div>

    <!-- 分割线 -->
    <el-divider
      class="xt-table-divider"
      v-if="props.divider && props.topBtn?.length" />

    <!-- 表格区域 -->
    <el-table
      v-bind="$attrs"
      class="xt-table-content"
      :header-cell-style="tableHeaderStyle">
      <!-- 选择列 -->
      <el-table-column
        v-if="props.selection"
        reserve-selection
        type="selection"
        width="35" />

      <!-- 动态列 -->
      <template v-for="(column, index) in props.columns" :key="index">
        <!-- 自定义插槽列 -->
        <el-table-column v-if="column.type === 'slot'" v-bind="column">
          <template #default="scope">
            <slot :name="column.slotName || column.prop" v-bind="scope" />
          </template>
        </el-table-column>

        <!-- 序号 -->
        <el-table-column v-else-if="column.type === 'index'" v-bind="column">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <!-- 开关列 -->
        <el-table-column v-else-if="column.type === 'switch'" v-bind="column">
          <template #default="scope">
            <el-switch v-model="scope.row[column.prop]" />
          </template>
        </el-table-column>

        <!-- 标签列 -->
        <el-table-column v-else-if="column.type === 'tag'" v-bind="column">
          <template #default="scope">
            <el-tag :type="scope.row[column.prop]?.type || 'info'">
              {{ scope.row[column.prop]?.label || scope.row[column.prop] }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 操作按钮列 -->
        <el-table-column v-else-if="column.type === 'operate'" v-bind="column">
          <template #default="scope">
            <slot name="operate" v-bind="scope" />
          </template>
        </el-table-column>

        <!-- 图标列 -->
        <el-table-column v-else-if="column.type === 'icon'" v-bind="column">
          <template #default="scope">
            <el-icon> <component :is="scope.row[column.prop]" /></el-icon>
          </template>
        </el-table-column>

        <!-- 启停状态 -->
        <el-table-column
          v-else-if="column.type === 'startStopType'"
          v-bind="column">
          <template #default="scope">
            {{ scope.row[column.prop] == 0 ? '启用' : '停用' }}
          </template>
        </el-table-column>

        <!-- 默认列 -->
        <el-table-column v-else v-bind="column">
          <template #default="scope">
            <template v-if="column.formatter">
              {{
                column.formatter(
                  scope.row,
                  column,
                  scope.row[column.prop],
                  scope.$index
                )
              }}
            </template>
            <template v-else>
              {{ scope.row[column.prop] }}
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="xt-table-pagination" v-if="props.pagination">
      <xt-pagination
        :total="props.total"
        @change="paginationChange"
        :layout="props.layout" />
    </div>
  </div>
</template>

<style scoped>
.xt-table-button {
  margin-bottom: 20px;
}
</style>
<style>
/* .xt-table {
  .el-table th .cell {
    font-size: 14px !important;
    background-color: rgba(239, 243, 247, 1);
    color: var(--font-title-color);
  }
  .el-table .el-table__header-wrapper th {
    background-color: rgba(239, 243, 247, 1) !important;
  }

  .el-table .el-table__header-wrapper th {
    height: 50px !important;
  }
} */
</style>
